'use client';

import { useActionState, useState, useEffect, SetStateAction } from "react";
import { useRouter, } from "next/navigation";
import Link from "next/link";
import { useInput } from "../../input/input";
import { action1 } from "../../action/action";
import { signIn } from "next-auth/react";

export default () => {

    const [seconds, setSeconds] = useState(3);
    const [activeTab, setActiveTab] = useState('tab1');
    const router = useRouter();

    const [_username, username, unCheck] = useInput({ name: 'username' });
    const [_password, password, psCheck] = useInput({ type: 'password', name: 'password' });

    const [state, dispatch, isPending] = useActionState(async (_: LoginResponse | null, formdata: FormData) => await action1(formdata), null);
    const { code, msg } = state ?? {};

    const handleTabClick = async (tab: SetStateAction<string>) => {
        setActiveTab(tab);
    };

    useEffect(() => {
        if (code === 0) {
            if (seconds > 0) {
                const timer = setInterval(() => {
                    setSeconds(prevCount => prevCount - 1);
                }, 1000);
                return () => clearInterval(timer);

            } else {
                router.push('/');
            }
        }
    }, [code, seconds, router]);

    return <>
        <div style={{ backgroundColor: '#8BC34A', width: '300px', height: '200px', border: '1px solid black', marginLeft: '1100px', marginTop: '60px' }}>

            <div className="tabs">
                <button style={activeTab === 'tab2'? {backgroundColor: '#007bff'}:{backgroundColor: '#fff'}} onClick={() => handleTabClick('tab1')}>密码登录</button>
                <button style={activeTab === 'tab1'? {backgroundColor: '#007bff'}:{backgroundColor: '#fff'}} onClick={() => handleTabClick('tab2')}>三方登录</button>
            </div>

            <div className="tab-content">
                {activeTab === 'tab1' &&
                    <>
                        {
                            isPending ? <div>Loading...</div>
                                : <>
                                    {code == 0 ? <p>登录成功, {seconds}秒后自动跳转...</p>
                                        : <div>
                                            <p style={{ color: 'red' }}>{msg}</p>

                                            <form action={dispatch}>
                                                {username}

                                                {password}

                                                <button type="submit" disabled={!unCheck || !psCheck} style={{ backgroundColor: '#00BCD4', padding: '2px 20px', borderRadius: '5px' }}>
                                                    Login
                                                </button>
                                            </form>
                                        </div>
                                    }
                                </>
                        }
                    </>
                }

                {activeTab === 'tab2' &&
                    <form action={async () => {await signIn();}}>
                        <button type="submit">github登录</button>
                    </form>
                }

                <Link href='/register'>注册用户</Link>
            </div>
        </div>
    </>
}